<template>
  <div class="stage-box">
    <div class="content-box">
      <TitleSecondary :title="'汇总'" />
      <div class="icon-clue">
        <div
          :class="['icon', check ? 'check-icon' : 'no-icon']"
          @click="checkIcon"
        >
          <p-icon :type="check ? 'check' : ' '"></p-icon>
        </div>
        {{ '包括线索' }}
      </div>
      <EchartPie
        v-if="getSeries.length"
        class="is-border"
        :option="option"
        :series="getSeries"
        :name="name"
        :center="center"
        :radius="radius"
        width="860px"
        height="482px"
        @changeRegion="changeRegion"
      />
      <p-empty v-else />
    </div>
    <div>
      <TitleSecondary title="明细数据" />
      <MainTableList
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :pagination="paginationMixin"
        :scroll="{ x: '100%', y: '53vh' }"
        @change="handleTableChange"
      />
    </div>
  </div>
</template>

<script>
import EchartPie from './echartPie.vue';
import MainTableList from './mainTableList.vue';
import { postleadsFollowList } from '@/api/clue.js';
import { postBusinessList } from '@/api/business.js';
import mixinTable from '@/mixins/mixin-table.js';
import mixinChart from './mixin.js'

export default {
  components: {
    EchartPie,
    MainTableList,
  },
  mixins: [mixinTable, mixinChart],
  props: {
    // echartData: {
    //   type: Array,
    //   default: () => [],
    // },
    // formParams: {
    //   type: Object,
    //   default: () => ({}),
    // },
    // includeLeads: {
    //   type: Boolean,
    //   default: true
    // }
  },
  data() {
    return {
      check: true,
      type: '',
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          bottom: '10%',
          right: '10%',
          icon: 'circle',
          itemWidth: 12,
          itemHeight: 12,
          width: 'auto',
          height: 'auto',
          padding: 2,
          itemGap: 5,
        },
      },
      center: ['40%', '50%'],
      radius: '68%',
      name: '',
      loading: false,
      dataSource: [],
    };
  },
  computed: {
    getSeries() {
      return this.echartData?.map(item => {
        return {
          name: item.stage === '999' ? '线索' : this.stageName[item.stage],
          value: item.amount,
          stage: item.stage
        };
      });
    },
    getStage() {
      return this.getSeries?.reduce((pre, cur) => {
        if (cur.name === this.type) {
          pre = cur.stage
        }
        return pre
      }, 0)
    },
  },
  watch: {},
  created() {},

  methods: {
    checkIcon() {
      this.check = !this.check;
      this.$emit('changeCludeLead', this.check)
    },
    changeRegion(val) {
      this.type = val.name || '';
      val.name === '线索' && this.getClueList();
      val.name !== '线索' && this.getBusinessList();
      this.paginationMixin.current = 1;
    },
    async getClueList() {
      const form = {
        ...this.formParams,
        includeLeads: this.includeLeads,
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
        leadsStatus: '1'
      };
      this.loading = true;
      const result = await postleadsFollowList(form).finally(
        () => (this.loading = false)
      );
      this.dataSource = result.data.data?.records;
      this.paginationMixin.total = result.data.data?.total;
    },
    async getBusinessList() {
      const form = {
        ...this.formParams,
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
        stage: this.getStage,
        state: '5'
      };
      this.loading = true;
      const result = await postBusinessList(form).finally(
        () => (this.loading = false)
      );
      this.paginationMixin.total = result.data.data?.total;
      this.dataSource = result.data.data?.records;
    },
    // 分页
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.paginationMixin = page;
      this.type === '线索' && this.getClueList();
      this.type !== '线索' && this.getBusinessList();
    },
  },
};
</script>

<style lang="less" scoped>
.stage-box {
  position: relative;
  .content-box {
    margin-bottom: 35px;
    // height: 482px;
  }
  .is-border {
    width: 100%;
    height: 100%;
    margin-top: 30px;
  }
  .icon-clue {
    display: flex;
    position: absolute;
    top: 38px;
    z-index: 1000;
    left: 0;
    align-items: center;
    .icon {
      width: 16px;
      height: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 2px;
      margin-right: 12px;
    }
    .no-icon {
      background: #fff;
      border: 1px solid #222;
    }
    .check-icon {
      color: #fff;
      background: #1740dc;
    }
  }
  /deep/ .poros-empty {
    margin-top: 100px;
  }
}
</style>
